<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" layout:decorator="layout/base">
<head>
	<title>客户录入</title>
	<script type="text/javascript" th:src="@{/assets/js/plugins/pickers/daterangepicker.js}"></script>
	<script type="text/javascript" th:src="@{/assets/js/plugins/uploaders/plupload/plupload.full.min.js}"></script>
	<script type="text/javascript" th:src="@{/assets/js/plugins/uploaders/plupload/plupload.queue.min.js}"></script>
	<script type="text/javascript" th:src="@{/assets/js/plugins/uploaders/plupload/zh_CN.js}"></script>
</head>

<body>

	<!-- Page header -->
	<div class="page-header" layout:fragment="page-header">
		<div class="page-header-content">
			<div class="page-title">
				<h4><i class="icon-arrow-left52 position-left"></i> <span class="text-semibold">幸福母乳会客户管理系统</span> - 客户录入</h4>
			</div>
		</div>
	</div>
	<!-- /page header -->


	<!-- Main content -->
	<div class="content-wrapper" layout:fragment="content">

		<!-- Table -->
		<div class="panel panel-flat min-panel">
			<div class="panel-heading">
				<h5 class="panel-title"><i class="icon-users" /> 客户资料录入</h5>
				<div class="heading-elements panel-tabs">
					<ul class="nav nav-tabs nav-tabs-bottom">
						<li class="active"><a href="#single-tab" data-toggle="tab"><i class="icon-list2 text-primary position-left"></i> 单条录入</a></li>
						<li><a href="#batch-tab" data-toggle="tab"><i class="icon-file-word text-danger position-left"></i> 批量导入</a></li>
						<li><a href="#record-tab" data-toggle="tab"><i class="icon-hour-glass text-info position-left"></i> 导入进度</a></li>
					</ul>
               	</div>
			</div>
				
			<div class="panel-tab-content tab-content">
					<div class="tab-pane active has-padding" id="single-tab">
						<form action="#" id="edit">
							<div class="modal-body">
								<div class="form-group">
									<label>姓名<span class="text-danger">*</span></label>
									<input name="name" type="text" placeholder="姓名最多10个字符" class="form-control" required="true" maxlength="10"/>
								</div>

								<div class="form-group">
									<label>手机号<span class="text-danger">*</span></label>
									<input type="text" class="form-control"  name="phone" placeholder="手机号 最多11位数字" required="true" number="true" maxlength="11"/>
								</div>
								
								<div class="form-group">
									<label>微信号</label>	
									<input name="weixin" type="text" placeholder="微信号 最多20字符字" class="form-control" maxlength="20"/>
								</div>

								<div class="form-group">
									<label>联系地址<span class="text-danger">*</span></label>	
									<input name="address" type="text" placeholder="联系地址 最多50个字符" class="form-control" required="true" maxlength="50"/>
								</div>
								
								<div class="form-group">
									<label>孩子出生医院</label>	
									<input name="hospital" type="text" placeholder="孩子出生医院 最多50个字符" class="form-control" maxlength="50"/>
								</div>
								
								<div class="form-group">
									<label>孩子生日</label>	
									<input name="birthday" id="birthday" type="text" placeholder="" class="form-control" />
								</div>
								
								<div class="form-group">
									<label>孩子性别</label>	
									<select name="sex" class="select form-control input-xs">
										<option value="1">男</option>												
										<option value="0">女</option>
									</select>
								</div>


								<div class="form-group">
									<label>所属分店</label>	
									<select name="store" class="select form-control input-xs">
										<option th:each="store : ${stores}" th:value="${store.name}" th:text="${store.name}">总部</option>
										<option value="">其他</option>
									</select>
								</div>
								
								<div class="form-group">
									<label>资料来源</label>	
									<select name="source" class="select form-control input-xs">
										<option value="1">医院</option>												
										<option value="0">自营</option>
										<option value="2">其他</option>
									</select>
								</div>
								
								<div class="form-group">
									<label>备注</label>	
									<textarea cols="5" rows="10" name="comment" placeholder="备注 最多300字符" class="form-control" maxlength="300"></textarea>
								</div>
								
							</div>
								
							<div class="modal-footer">
								<button type="button" class="btn btn-link" id="btnReset">重置</button>
								<button type="button" id="submitEdit" class="btn btn-primary" >保存</button>
							</div>
						</form>
					</div>
					<div class="tab-pane has-padding" id="batch-tab">
					<div class="alert alert-primary no-border" id="info">
						请选择需要上传的文件，可以同时上传多个文件，支持xls，xlsx， csv文件 <a th:href="@{/oss/templetes/templete.xls}" class="alert-link text-danger" target="blank" >下载模板</a>
					</div>
					<div class="alert alert-danger no-border" id="uploadinfo" style="display:none">
					</div>

					<div class="file-uploader">
							<p>Your browser doesn't have Flash installed.</p></div>
							

					</div>
					
					<div class="tab-pane has-padding" id="record-tab">
					<div class="alert alert-primary no-border" id="info">
					该页面显示当前上传的文件的导入进度
					</div>
			<div class="row">
								<div class="col-md-12">
						<div class="panel panel-body border-left-primary">
							<div>
								<h6 class="no-margin text-semibold"><i class="icon-file-word text-danger " ></i> 客户资料.xls</h6>
								<p class="content-group-sm text-muted">成功导入4条，失败2条</p>
							</div>

							<div class="progress">
								<div class="progress-bar progress-bar-striped active" style="width: 50%">
									<span class="sr-only">50% Complete</span>
								</div>
							</div>
							
							
						</div>

					</div>

<div class="col-md-12">
						<div class="panel panel-body border-left-primary">
							<div>
								<h6 class="no-margin text-semibold"><i class="icon-file-word text-danger " ></i> 客户资料.xls</h6>
								<p class="content-group-sm text-muted">成功导入4条，失败2条</p>
							</div>

							<div class="progress">
								<div class="progress-bar progress-bar-striped active" style="width: 50%">
									<span class="sr-only">50% Complete</span>
								</div>
							</div>
							
							
						</div>


							
						</div>
			</div></div>
			
			
			</div>
			
		</div>
		<!-- /table -->
		<script type="text/javascript" th:src="@{/oss/js/addCustomer.js}"></script>

	</div>
	<!-- /main content -->

</body>
</html>
